import React, { Component } from 'react'

export class Alertbox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: false,
        }
    }
    render() {
        const { flag } = this.state;
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        flag: true
                    })
                }}>购物车</button>

                {/* 用三元运算符判断，为真，则渲染，为假，则为空 */}

                {
                    flag ?
                        <div className="mask">
                            <div className="alertbox">
                                <span onClick={() => {
                                    this.setState({
                                        flag: false
                                    })
                                }}>X</span>
                                <h5>椰椰杨枝甘露</h5>
                                <p>中杯、常规、果糖、常规糖、常规冰</p>
                                <p>￥16元</p>
                            </div>
                        </div> : null
                }
            </div>
        )
    }
}

export default Alertbox